<template>
  <div class="page">
    <div class="head">
      <h1>设置参与战斗的小猴</h1>
    </div>
    <box gap="0 8px 10px">
      <x-button type="primary" @click.native="showList()">添加小猴（{{total}}/{{maxnum}}）</x-button>
    </box>
    <div class="panel" @click="removeMonkeyConfirm(item.id)" v-for="(item,index) in homeList" :key="index">
      <div class="img">
        <img :src="item.facade" :style="{background: item.background}">
      </div>
      <div class="info">
        <div># {{item.id}} · {{item.generation}}{{ $t('代') }}</div>
        <div>成长：{{item.grow}}/生育：{{item.bear}}/力量：{{item.makeMoney}}</div>
        <div>体重：{{item.weight}}kg</div>
      </div>
    </div>
    <infinite-loading @infinite="initData" ref="infiniteLoading">
      <span slot="no-more"></span>
      <div slot="no-results">
        <br>
        <empty></empty>
      </div>
      <spinner slot="spinner" type="lines"></spinner>
    </infinite-loading>
    <div v-transfer-dom>
      <popup v-model="showPicker" height="80%" class="picker-list">
        <h2>选择要战斗的小猴</h2>
        <div class="filter">
          <ul class="order">
            <li :class="{'active': item.value == params.orderBy,'up': params.sort == 0}" @click="changeOrder(item.value)" v-for="(item, index) in order" :key="index">{{$t(item.name)}}</li>
          </ul>
          <div class="btns">
            <div class="option" @click="showFilter = true"></div>
          </div>
        </div>
        <div class="panel" @click="chooseMonkey(item.id)" v-for="(item,index) in records" :key="index">
          <div class="img">
            <img :src="item.facade" :style="{background: item.background}">
          </div>
          <div class="info">
            <div># {{item.id}} · {{item.generation}}{{ $t('代') }}</div>
            <div>成长：{{item.grow}}/生育：{{item.bear}}/力量：{{item.makeMoney}}</div>
            <div>体重：{{item.weight}}kg</div>
          </div>
        </div>
        <infinite-loading @infinite="getMyMonkeys" ref="infiniteLoading1">
          <span slot="no-more"></span>
          <div slot="no-results">
            <br>
            <empty></empty>
          </div>
          <spinner slot="spinner" type="lines"></spinner>
        </infinite-loading>
      </popup>
    </div>
    <!-- 复杂筛选 -->
    <div v-transfer-dom>
      <popup v-model="showFilter" position="right" width="100%" class="filters">
        <div class="wrap">
          <div class="block">
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="params.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="params.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="params.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
          </div>
        </div>
        <div class="button">
          <x-button type="warn" class="btn" @click.native="resetFilter">{{$t('重置')}}</x-button>
          <x-button type="primary" class="btn" @click.native="enterFilter">{{$t('确定')}}</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box,
    TransferDom,
    XInput,
    Group,
    Popup,
    Spinner
  } from 'vux'
  import empty from './common/empty.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      XInput,
      Group,
      Popup,
      empty,
      InfiniteLoading,
      Spinner
    },
    data() {
      return {
        showPicker: false,
        showFilter: false,
        params: {
          current: 1,
          orderBy: 4,
          sort: 0,
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
        homeList: [],
        records: [],
        current: 1,
        order: [{
            name: 'ID',
            value: '4'
          },
          {
            name: '代数',
            value: '1'
          },
          {
            name: '体重',
            value: '2'
          },
        ],
        maxnum: 50,
        total: 0
      }
    },
    methods: {
      initData($state) {
        this.$http
          .post(`/gameCastle/meetingStoneMonkeyList`, {
            current: this.current
          })
          .then(res => {
            if (res.code == 200) {
              this.maxnum = res.result.condition.maxnum
              this.total = res.result.total
              if (res.result.total > 0) {
                this.homeList = this.homeList.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                console.log('kong');
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      getMyMonkeys($state) {
        console.log('wqwqwq');
        this.$http
          .post(`/game/myMonkeyPageForStone`, this.params)
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.records = this.records.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.params.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      showList() {
        this.resetData()
        this.showPicker = true
      },
      resetList() {
        console.log(this.$refs);
        this.current = 1;
        this.homeList = []
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
      },
      resetData() {
        console.log(this.$refs);
        this.params.current = 1;
        this.records = []
        this.$refs.infiniteLoading1.$emit('$InfiniteLoading:reset');
      },
      resetFilter() {
        this.params.startGen = '';
        this.params.endGen = '';
        this.params.startMakeMoney = '';
        this.params.endMakeMoney = '';
        this.params.startWeight = '';
        this.params.endWeight = '';
      },
      enterFilter() {
        this.$nextTick(() => {
          this.resetData()
          this.showFilter = false
        });
      },
      changeOrder(order) {
        //点击同一个
        if (order == this.params.orderBy) {
          this.params.sort = this.params.sort == 0 ? 1 : 0;
        } else {
          this.params.orderBy = order;
          this.params.sort = 1
        }
        this.resetData()
      },
      chooseMonkey(id) {
        this.$http
          .post(`/gameCastle/meetingStoneAttack`, {
            monkeyIdList: id,
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.resetList()
              this.showPicker = false
            } else {}
          })
          .catch(function(error) {});
      },
      removeMonkeyConfirm(id) {
        // cancelMeeting
        var that = this;
        this.$vux.confirm.show({
          title: `移除小猴`,
          content: `<p>确认移除小猴 # ${id}吗?</p>`,
          cancelText: '取消',
          confirmText: '移除',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.removeMonkey(id)
          }
        })
      },
      removeMonkey(id) {
        this.$http
          .get(`/gameCastle/cancelMeeting?monekyId=${id}`)
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.resetList()
            } else {}
          })
          .catch(function(error) {});
      }
    },
  }
</script>

<style lang="scss" scoped>
  .picker-list {
    background-color: #fbf9fe;
    h2 {
      text-align: center;
      font-size: 16px;
      color: $tmdark;
      padding: 10px 0;
    }
  }
  .panel {
    display: flex;
    .img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      img {
        width: 100%;
        background-color: #e5ffde;
      }
    }
    .info {
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      color: $grey;
      white-space: nowrap;
      span {
        color: #333;
      }
      em {
        font-style: normal;
      }
    }
  }
  .filter {
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 8px 12px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    display: flex;
    justify-content: space-between;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .option {
        width: 28px;
        height: 28px;
        margin-left: 5px;
        background: url() no-repeat 50%;
        background-size: 16px 16px;
      }
    }
    .order {
      color: $link;
      li+li {
        margin-left: 12px;
      }
      .active:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        width: 12px;
        height: 12px;
        background: url() no-repeat 50%;
        background-size: cover;
      }
      .active.up:after {
        transform: rotate(-180deg)
      }
    }
  }
  .filters {
    overflow: hidden;
    background: #fbf9fe;
    &::-webkit-scrollbar {
      display: none;
    }
    .wrap {
      padding-bottom: 60px;
      height: 100%;
      overflow-y: scroll;
      padding: 12px;
    }
    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn {
        width: 50%;
        height: 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        &:after {
          display: none;
        }
      }
    }
  }
</style>
